<template>
  <div style="padding:10px">
    <div class="breakevenPage_searchWrap">
      <search ref="search" />
    </div>
    <div class="breakevenPage_table_wrap">
      <DynamicTables :table-data="tableData" :table-header="columnList" :table-loading="tableLoading" />
    </div>
    <!-- 分页 -->
    <div class="commonTable_pagination">
      <div class="commonTable_pagination_right">
        <el-pagination
          background
          :current-page="pageIndex"
          :page-sizes="[200,400,600,800,1000]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import search from './components/search.vue';
import DynamicTables from './components/DynamicTables.vue';
import { getHeader, getData } from '@/api/IncomeStatement/index.js';
export default {
  components: {
    search,
    DynamicTables
  },
  data() {
    return {
      tableData: [],
      columnList: [],
      tableLoading: false,
      headerList: [],
      pageSize: 200,
      pageIndex: 1,
      count: 0
    };
  },
  created() {
    this.getHeaderList();
  },
  methods: {
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getData();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    getHeaderList() {
      getHeader({
        iVouchId: '8089'
      }).then(res => {
        if (res.success) {
          this.headerList = res.data.headerList;
          this.columnList = res.data.columnList.filter(item => item.bHide === 0);
          this.columnList[0].fixed = 'left';
          this.columnList[0].width = '180';
          this.columnList[1].fixed = 'left';
          this.columnList[1].width = '180';
          this.columnList[2].fixed = 'left';
          this.columnList[2].width = '180';
        }
      });
    },
    getData() {
      this.tableLoading = true;
      const filterList = [];
      this.$refs.search.filterList.map((item, index) => {
        filterList.push({
          value: item.formType === '0' ? item.value !== '' ? item.value.split(' ')[1] : item.value : item.value,
          col: item.col,
          symbol: item.symbol
        });
      });
      getData({
        columnList: this.columnList,
        filterList: filterList,
        headerList: this.headerList,
        moneyType: '1',
        year: localStorage.getItem('chooseYear'),
        month: '',
        orderBy: '',
        pageType: '1',
        pageSize: this.pageSize,
        pageIndex: this.pageIndex - 1
      }).then(res => {
        setTimeout(() => {
          this.tableLoading = false;
        }, 500);
        if (res.success) {
          this.tableData = res.data === '' ? [] : res.data;
          this.count = res.total;
        } else {
          this.tableData = [];
          this.count = 0;
        }
      });
    }
  }

};
</script>

<style lang='scss' scoped>

.breakevenPage_searchWrap {
  padding: 10px;
  background-color: #fff;
  border-radius: 5px;
}
.breakevenPage_table_wrap{
  margin-top: 10px
}
.commonTable_pagination{
  text-align: right
}
</style>
